<template>
  <div class="md-news-pages-component">
    <div class="md-news-panel">
      <ul class="news-list" v-if="articleList.length">
        <li class="news-item" v-for="(item, index) in articleList" :key="index" @click="handleTurnDetail(item)">
          <div class="t-img" v-if="item.cover">
            <img :src="`/video-dev${item.cover}`" alt="">
          </div>
          <div class="t-right">
            <div class="t-tit-box">
              <p class="t-tit">{{item.title}}</p>
              <p class="t-type">
                <span>{{item.createTime}}</span>
                <span>类型：<span v-for="(d, i) in dictList" :key="i"><span v-if="item.type == d.dictValue">{{d.dictLabel}}</span></span></span>
              </p>
            </div>
          </div>
        </li>
      </ul>
      <p v-else class="no-data">暂无数据</p>
      <!-- 分页 -->
      <div class="pagination">
        <el-pagination @current-change="handleCurrentChange" :current-page="+params.pageNum" :page-size="params.pageSize" layout="total, prev, pager, next, jumper" :total="total">
        </el-pagination>
      </div>
    </div>
  </div>
</template>
<script>
import { selectArticleList } from '@/axios/news'
import { getDictType } from '@/axios/home'
export default {
  name: 'mdNewsPagesComponent',
  data () {
    return {
      params: {
        type1: 1,
        pageNum: 1,
        pageSize: 10
      },
      articleList: [],
      dictList: [],
      total: 0
    }
  },
  created () {
    this.selectArticleList()
    this.getDictType()
  },
  methods: {
    async selectArticleList () {
      const res = await selectArticleList(this.params)
      if (res.code === 200) {
        this.articleList = res.rows
        this.total = res.total
      }
    },
    async getDictType () {
      const res = await getDictType('md_news_type')
      if (res.code === 200) {
        this.dictList = res.data
      }
    },
    handleTurnDetail (item) {
      this.$router.push({
        path: '/newsDetail',
        query: {
          rid: item.rid
        }
      })
    },
    handleCurrentChange (val) {
      this.params.pageNum = val
      this.selectArticleList()
    }
  }
}
</script>
<style lang="less" scoped>
.md-news-pages-component {
  width: 100%;
  background: #fff;
  .md-news-panel {
    width: 1152px;
    margin: 0 auto;
    padding: 30px 0;
  }
  .news-list {
    width: 100%;
    .news-item {
      cursor: pointer;
      padding: 20px 0;
      border-bottom: 1px solid rgb(230,230,230);
      display: flex;
      align-items: center;
      &:hover {
        .t-tit {
          color: @md-primary-color;
        }
      }
      &:first-child {
        padding-top: 0;
      }
      .t-img {
        width: 100px;
        height: 100px;
        border-radius: 8px;
        overflow: hidden;
        margin-right: 20px;
        flex-shrink: 0;
        img {
          width: 100%;
          height: 100%;
        }
      }
      .t-right {
        flex: 1;
        height: 100px;
        display: flex;
        align-items: center;
        .t-tit-box {
          flex: 1;
          .t-tit {
            font-size: 16px;
            margin-bottom: 20px;
          }
          .t-type {
            span {
              color: #888;
              font-size: 12px;
              margin-right: 30px;
            }
          }
        }
        .q-btn {
          margin-left: 10px;
          flex-shrink: 0;
        }
      }
    }
  }
  .pagination {
    margin-top: 20px;
    display: flex;
    justify-content: center;
  }
}
.no-data {
  color: #999;
  font-size: 12px;
  padding: 30px 0;
  text-align: center;
}
/deep/ .el-pagination .btn-next, .el-pagination .btn-prev {
  background: transparent !important;
}
/deep/ .el-pagination button:disabled {
  background: transparent !important;
}
/deep/ .el-pager li {
  background: transparent !important;
}
/deep/ .el-pager li.active {
  color: @md-primary-color;;
}
/deep/ .el-pager li:hover {
  color: @md-primary-color;;
}
/deep/ .el-input__inner:focus {
  border-color: @md-primary-color !important;
}
/deep/ .el-pagination button:hover {
  color: @md-primary-color;
}
</style>
